<template>
  <div>

    <i-panel title="基础用法">
      <i-input @click="toggleRight1" :value="name" title="收货人" autofocus placeholder="名字" />
      <i-input  type="number" title="联系电话" placeholder="请输入手机号" />
      <i-input  type="textarea" title="详细地址" placeholder="请输入详细地址(最多50字)" maxlength="50" />
      <i-input  title="用户信息" disabled />
    </i-panel>

    <i-button @click="toggleRight1" type="ghost" long="true">性别</i-button>
    <i-drawer mode="right" :visible="showRight1" @close="toggleRight1">
      <view class="demo-container">


        <i-panel title="group-水果">
          <i-checkbox-group :current="current" @change="handleFruitChange">
            <i-checkbox v-for="f in fruit" :position="position" :key="f.id" :value="f.name">
            </i-checkbox>
          </i-checkbox-group>
        </i-panel>


      </view>
    </i-drawer>

  </div>
</template>

<script>
  export default {
    name: "index",
    data() {
      return {
        name: '',
        showRight1: false,
        fruit: [
          {id: 1, name: '香蕉'},
          {id: 2, name: '苹果'},
          {id: 3, name: '西瓜'},
          {id: 4, name: '葡萄'}
        ],
        current: ['苹果', '葡萄'],
        position: 'left'
      }
    },
    methods: {
      toggleRight1() {
        this.showRight1 = !this.showRight1
      },
      handleFruitChange(event) {
        const index = this.current.indexOf(event.mp.detail.value);
        index === -1 ? this.current.push(event.mp.detail.value) : this.current.splice(index, 1);
        this.current =  this.current
        this.name = this.current
      },
      components: {}
    }
  }
</script>

<style scoped>

</style>
